<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul{
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
        </ul>
        <input type="text" id="username" placeholder="name"><input type="button" value="注册" id="login">
        <br>
        <select name="" id="rnum">
            <option value="">0</option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <option value="">8</option>
            <option value="">9</option>
        </select>
        <button>random</button>

    </div>
    <script>
        var li = document.createElement("li");//创建一个li类型的元素
        li.innerText = 55;
        // var ul = document.getElementsByTagName("ul");
        var ul = document.querySelector("ul");//获取标签
        ul.appendChild(li);

        //querySelector 选择类 返回第一个值
        //querySelectorAll 选择 返回一个数组
        li = document.querySelectorAll("li")[2];
        var newli = li.cloneNode(true);
        ul.appendChild(newli);
        console.log(newli.innerText);
        newli.innerText = 66;

        var second = document.querySelectorAll("li")[1];
        ul.insertBefore(newli, second);
        ul.removeChild(document.querySelectorAll("li")[3]);
        // ul.appendChild(newli);

        li = document.querySelectorAll("li");
        console.log(li);
        for (var i = 0; i < li.length; i++) {
            if (i % 2 == 0) {
                li[i].setAttribute("style","background-color: pink")
            }
        }
        var inp = document.querySelector("#username");
        console.log(inp);
        var btn1 = document.querySelector("#login");
        console.log(btn);
        btn1.onclick = function () {
            var name = inp.value;
            console.log(name);
            if (name.length > 3) {
                console.log("r");
                alert("r");
            } else {
                console.log("w");
                alert("w");
            }
        }
        var num = document.querySelector("#rnum");
        var btn2 = document.querySelector("button");
        var opt = num.children;
        btn2.onclick = function(){
            var i=Math.floor(Math.random()*10);
            opt[i].setAttribute("selected","true");
        }
    </script>

</body>

</html>